<template>
  <div class="login-box">
    <!-- 登录框 -->
    <div class="login-inner">
      <h3>超级外卖管理系统</h3>

      <!-- 登录的表单 -->
      <el-form
        :model="loginForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        size="mini"
      >
        <el-form-item prop="uname">
          <el-input
            type="text"
            v-model="loginForm.uname"
            prefix-icon="iconfont icon-yonghu"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            :type="flag ? 'password' : 'text'"
            v-model="loginForm.pass"
            prefix-icon="iconfont icon-mima"
            autocomplete="off"
          >
          <i @click="flag = !flag"  slot="suffix" class="iconfont" :class="flag ? 'icon-eyes' : 'icon-eyes-'"></i>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    // 非空校验的函数表达式
    var validateUname = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      // 表单的数据对象 （规则对象的属性必须和数据对象的属性保存一致）
      loginForm: {
        uname: '',
        pass: ''
      },
      // 表单的规则对象
      rules: {
        // validator：校验器   trigger：触发方式
        uname: [{ validator: validateUname, trigger: 'blur' }],
        pass: [{ validator: validatePass, trigger: 'blur' }]
      },
      flag: true
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.login-box {
  height: 100%;
  background-color: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;

  .login-inner {
    width: 370px;
    height: 220px;
    // background-color: #fff;

    h3 {
      text-align: center;
      font-weight: 700;
      padding: 20px;
      // 字间距
      letter-spacing: 2px;
      color: #fff;
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>
